<template>
	<view class="header-bar" :style="style">
		<view class="home-title" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px',}]">
			<text v-if="title">{{title}}</text>
			<!-- 默认插槽，不带title的时候显示headerBar组件的子元素，如果带有 title 那就只显示 title -->
			<slot v-else></slot>
			<view class="iconfont-box" v-if="isShowSearch || isShowNews">
				<text class="iconfont icon-search" v-if="isShowSearch"></text>
				<text class="iconfont icon-warning" v-if="isShowNews"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"header-bar",
		props: {
			title: { // 自定头部导航的标题
				type: String,
				default: ''
			},
			isShowSearch: { // 是否显示搜索按钮，跳转到搜索页面
				type: Boolean,
				default: false
			},
			isShowNews: { // 是否显示消息，跳转到消息页面
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				statusBarH: this.statusBar,  // 状态栏高度
				customBarH: this.customBar,  // 自定义导航栏高度
			};
		},
		computed: {  
			style() {  
				let _style = {
					height: `${this.customBarH}px`,
					backgroundColor: '#fff',
				}
				return _style  
			}  
		},
	}
</script>

<style>
.header-bar .home-title {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	font-size: 35rpx;
	font-weight: bold;
	color: #000;
}
.header-bar .iconfont {
	color: #333;
	font-weight: normal;
}
.header-bar .icon-search {
	margin-right: 15rpx;
}
</style>
